<template>
  <div class="header">
    <div v-if="!isLogin">
      <router-link to="/login">
        <i-button type="primary" class="header_menu">登录</i-button>
      </router-link>
    </div>
    <div v-else>
      <div class="header_menu">
        <router-link :to="{ path: '/userInfo', query: { id: id } }">
          <span class="user"><Icon type="md-person" />{{ username }}</span>
        </router-link>
        <i-button class="button" type="warning" @click="logout">
          退出
        </i-button>
        <!-- 退出对话框 -->
        <Modal v-model="visible" title="提示" @on-ok="ok" @on-cancel="cancel">
          <p>请确认是否退出账号？</p>
        </Modal>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      visible: false,
      username: ''
    }
  },
  created() {
    let token = localStorage.getItem('token')
    if (token) {
      this.isLogin = true
      this.username = localStorage.getItem('username')
      this.id = localStorage.getItem('_id')
    }
  },
  methods: {
    logout() {
      this.visible = true
    },
    ok() {
      localStorage.clear()
      this.isLogin = false
      this.visible = false
      this.$router.push({ name: 'Home', query: { t: Date.now() } })
    },
    cancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="css" scoped>
.header {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  text-align: right;
}
.header_menu {
  color: #fff;
  font-size: 14px;
}
.button {
  margin-left: 8px;
}
.user {
  color: white;
}
</style>
